<template>
  <div class="main">
    <Header></Header>
    <SearchIcon></SearchIcon>
    <div class="ys-shopCart-info">
      <!--      显示图片-->
      <div class="ys-shopCart-img">
        <div class="ys-shopCart-img-index">
          <img :src="this.getUrl(baseInfoImgOne)" style="width: 370px;height: 370px"/>
        </div>
      </div>
      <div class="ys-shopCart-information">
        <div class="ys-shopCart-desc">
          <h3>{{ baseInfoPro.content }}</h3>
        </div>
        <div class="ys-shopCart-price">
          <div class="ys-shopCart-price-more-a">
            <h6 id="price">价格</h6>
            <del id="sure-price">￥{{ baseInfoSku[currentSkuIndex].originalPrice }}</del>
            <h6 id="after-price">折扣价格</h6> <h4 id="suer-price-after">￥{{ baseInfoSku[currentSkuIndex].sellPrice }}</h4>
            <div class="dazhe">促销优惠</div>
          </div>
          <div class="ys-shopCart-price-more-b"><h4 id="cutdown-price">优惠
            {{ baseInfoSku[currentSkuIndex].discounts * 10 }}折</h4></div>
          <div class="size-list">
            <div class="size-desc">尺寸</div>
            <ul class="ys-shopCart-size-list" v-for="(item,index) in baseInfoSku" :key="index">
              <li :data-index="index" @click="changeSku" :style="this.sizeStyle">{{ item.skuName }}</li>
            </ul>
          </div>
          <div class="color-list" v-for="(value,keys) in skuProps" :key="keys">
            <div class="color-desc">{{ keys }}</div>
            <ul class="ys-shopCart-color-list" v-for="(v,index) in value" :key="index">
              <li @click="changeProp" :data-key="keys" :data-v="v" :name="keys">{{ v }}</li>
            </ul>
          </div>
          <div class="number-shops">
            <div class="number-desc">数量</div>
            <el-input-number v-model="num" :min="1" :max="99" style="margin-top: 4px;margin-left: 10px"/>
          </div>
          <div class="number-has-sold">
            <div class="number-sales-volume">销量:{{ baseInfoPro.soldNum }}</div>
            <div class="shops-evaluate">评价:{{ baseInfoPro.goodCommentsNumber }}</div>
          </div>
          <el-button class="ys-Notice-login">立即购买</el-button>
          <el-button class="ys-Notice-reg" :plain="true" @click="addshopCart()">加入购物车</el-button>
        </div>
      </div>
      <div class="ys-introduction-of-business">
        <div class="ys-of-business-name">{{ BuinessInfo.buinessName }}</div>
        <div class="ys-of-business-info">
          <h4 style="color: #01c78a">信誉:{{ BuinessInfo.buinessRep }}</h4>
          <h4 style="color: #01c78a">掌柜:{{ BuinessInfo.buinessOwner }}</h4>
          <h4 style="color: #01c78a">联系:{{ BuinessInfo.buinessPhone }}</h4>
          <!--          <h4>开店时长:{{BuinessInfo.buinessName}}</h4>-->
        </div>
      </div>
    </div>
    <div class="ys-shopCart-details">
      <div class="ys-shopCart-details-desc">
        <ul id="details-desc">
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-comments">
        <ul id="bottom-xiangguan-list">
          <li v-for="(c,index) in goodList" :key="index">
            <ul id="img-list">
              <li v-for="(c2,index) in c.imgs" :key="index">
                <img :src="getUrl(c2.url)" alt="" style="width: 220px;height: 220px;margin-left: 20px">
                <!--                getUrl(c2.url)-->
              </li>
              <a href="#" id="desc-shops" style="margin-left: 20px">{{ c.content }}</a>
            </ul>
          </li>
        </ul>
      </div>
      <div class="shops-comments">
        <ul class="shops-comments-title">
          <li><a @click="changeStyleone"><span style="cursor: pointer">商品参数</span></a></li>
          <li><a @click="changeStyletow"><span style="cursor: pointer">全部评论</span></a></li>
          <li><a @click="changeStylethree"><span style="cursor: pointer">猜你喜欢</span></a></li>
        </ul>
      </div>
      <div class="shops-comments-table" :style="this.styleone">
        <h5 style="margin-left: 20px;display: block;font-weight: 400;">产品参数</h5>
        <div class="canshu-desc">
          <ul class="first">
            <li>产地:{{ this.productParam.productPlace }}</li>
            <li>品牌:{{ this.productParam.brand }}</li>
            <li>保质期:{{ this.productParam.footPeriod }}</li>
            <li>生产厂商:{{ this.productParam.factoryName }}</li>
            <li>生产地址:{{ this.productParam.factoryAddress }}</li>
            <li>生产布料:{{ this.productParam.eatMethod }}</li>
            <li>产品规格:{{ this.productParam.packagingMethod }}</li>
            <li>洗涤方式:{{ this.productParam.storageMethod }}</li>
            <li>产品类型:{{ this.productParam.weight }}</li>
          </ul>
        </div>
      </div>
      <div class="shops-comments-table-1" :style="this.styletow">
        <h4>评论{{}}</h4>
        <h4>好评率{{}}</h4>
        <ul id="comments-desc">
          <li v-for="(c,index) in pageList" :key="index">
            <img :src="this.getUrl(c.userImg)" alt=""
                 style="width: 45px;height: 45px;border: 1px solid rgba(143,141,141,0.45);border-radius: 22px;float: left">
            <!--            (c.userImg)-->
            <h4 style="font-size: 10px;color: rgba(114,112,112,0.69);font-weight: 400;float: left">匿名</h4>
            <!--            <h4 style="font-size: 10px;color: rgba(114,112,112,0.69);font-weight: 400;float: left">匿名</h4>-->
            <div class="huifu">{{ c.commContent }}</div>
          </li>
        </ul>
        <el-pagination background layout="prev, pager,next,total" :total="total" :page-size="5"
                       style="margin-left: 500px;margin-top: 50px" :current-page="pageNum" @next-click="next"
                       @prev-click="prev" @current-change="pager">
        </el-pagination>
      </div>
      <div class="shops-comments-table-2" :style="this.stylethree">
        <ul v-for="(c,index) in goodList" :key="index">
          <li>
            <ul class="nixihuan-img" v-for="(c1,index) in c.imgs" :key="index">
              <li><img :src="getUrl(c1.url)" alt=""
                       style="width: 130px;height: 130px;border: 1px solid rgba(147,147,147,0.4);margin-left: 35px">
                <!--                getUrl(c1.url)-->
              </li>
            </ul>
            <a id="desc">{{ c.content }}</a>
          </li>
        </ul>
      </div>
    </div>

    <EndOfhtml/>
    <LoginFooter>
    </LoginFooter>
  </div>

</template>

<script>
import Header from "../components/Header";
import SearchIcon from "../components/SearchIcon";
import LoginFooter from "../components/LoginFooter";
import {publicFun} from "../mixin";
import EndOfhtml from "../components/EndOfhtml";
import {ElMessage} from 'element-plus'

export default {
  name: "introductionShop",
  components: {
    Header, SearchIcon, LoginFooter, EndOfhtml
  },
  data() {
    return {
      productId: null,
      goodList: [],
      baseInfoPro: [],
      baseInfoImgOne: "",
      baseInfoSku: [],
      baseInfoImg: [],
      productParam: [],
      productCommens: [],
      BuinessInfo: [],
      styleone: "",
      styletow: "display:none",
      stylethree: "display:none",
      productBusinessName: null,
      pageList: [],
      total: null,
      pageCount: null,
      pageNum: 1,
      currentSkuIndex: 0,
      skuProps: {},
      colorStyleOfli: 0,
      num: 1,
      selectedIndex: 0,
      choiceSkuProps: {},
      size: {},
      mytoken: "",
      sizeStyle: "",
      buinessName:""
    }
  },
  mixins: [publicFun],
  methods: {
    getBaseInfo() {

      this.$axios.get('api/productTui/infodesc', {
        params: {
          productId: this.productId,
          productBusinessName: this.productBusinessName
        }
      }).then((res) => {
        console.log(res)
        this.baseInfoPro = res.data.data.product;
        this.BuinessInfo = res.data.data.businessInfos[0];
        this.buinessName= this.BuinessInfo.buinessName;
        console.log(this.buinessName)
        this.baseInfoImgOne = res.data.data.productImg[0].url;
        this.baseInfoSku = res.data.data.productSku;
        this.baseInfoImg = res.data.data.productImg;
        var str = this.baseInfoSku[0].untitled;
        this.skuProps = eval("(" + str + ")");

      })
    },
    getGoodList() {
      this.$axios.get("api/productTui/list-goods").then((res) => {
        this.goodList = res.data.data;
        console.log(this.goodList)
      })
    },
    getProductId() {
      this.productId = this.$route.query.productId
      this.productBusinessName = this.$route.query.productBusinessName
    },
    getUrl(name) {
      return require("../assets/img/" + name + ".jpg");
    },
    getProParam() {
      this.$axios.get("api/productTui/get-params", {
        params: {
          productId: this.productId
        }
      }).then((res) => {
        this.productParam = res.data.data;
      })
    },
    changeStyleone() {
      this.styleone = "";
      this.styletow = "display:none";
      this.stylethree = "display:none";
    }, changeStyletow() {
      this.styleone = "display:none";
      this.styletow = "";
      this.stylethree = "display:none";
    }, changeStylethree() {
      this.styleone = "display:none";
      this.styletow = "display:none";
      this.stylethree = "";
    },
    getComments() {
      this.$axios.get("api/productTui/get-pageComment", {
        params: {
          productId: this.productId,
          pageNum: 1,
          limit: 5
        }
      }).then((res) => {
        this.productCommens = res.data.data;
        this.pageList = this.productCommens.list;
        console.log(this.pageList);
        this.total = this.productCommens.count;
        this.pageCount = this.productCommens.pageCount;
      })
    },
    next() {
      this.pageNum = this.pageNum + 1;
    },
    prev() {
      this.pageNum = this.pageNum - 1;
    },
    pager(currentPage) {
      this.pageNum = currentPage;
      this.$axios.get("api/productTui/get-pageComment", {
        params: {
          productId: this.productId,
          pageNum: this.pageNum,
          limit: 5
        }
      }).then((res) => {
        this.productCommens = res.data.data;
        this.pageList = this.productCommens.list;
        console.log(this.pageList)
        this.total = this.productCommens.count;
        this.pageCount = this.productCommens.pageCount;
      })
    },
    changeSku(event) {
      //获取点击得套餐得索引
      this.currentSkuIndex = event.srcElement.dataset.index;
      var str = this.baseInfoSku[this.currentSkuIndex].untitled;
      this.skuProps = eval("(" + str + ")");
      console.log(this.skuProps);
      console.log(this.baseInfoSku[this.currentSkuIndex].skuName);
      this.size = this.baseInfoSku[this.currentSkuIndex].skuName;

    },
    changeProp(event) {
      var key = event.srcElement.dataset.key;
      var v = event.srcElement.dataset.v;
      this.choiceSkuProps[key] = v;
      console.log(this.choiceSkuProps);
    },
    addshopCart() {
      var propStr = "";
      for (var key in this.choiceSkuProps) {
        propStr += key + ":" + this.choiceSkuProps[key] + ";";
      }
      console.log(this.productBusinessName)
      var uid = this.getCookieValue("userId");
      var shoppingCart = {
        "cartNum": this.num,
        "productId": this.productId,
        "productPrice": this.baseInfoSku[this.currentSkuIndex].sellPrice * this.num,
        "skuId": this.baseInfoSku[this.currentSkuIndex].skuId,
        "skuProps": propStr + "" + "尺寸" + ":" + this.size + ";",
        "userId": uid,
        "buinessName":this.productBusinessName
      }
      this.mytoken = this.getCookieValue("token");
      console.log(this.getCookieValue("token"));
      this.$axios({
        method: "post",
        url: "api/shopCart/list",
        headers: {
          token: this.mytoken,
        },
        data: shoppingCart
      }).then((res) => {
        console.log(res)
        console.log(res);
        if (res.data.code == 201) {
          console.log("添加购物车成功")
          ElMessage('添加购物车成功')
        } else if (res.data.code == 501) {
          console.log("添加失败")
          ElMessage('添加购物车失败')
        } else {
          this.$router.push({path: "/ysLogin"})
        }
      })
    }
  },
  created() {
    this.getGoodList()
    this.getProductId()
    this.getBaseInfo()
    this.getProParam()
    this.getComments()
  },
}
</script>

<style scoped>
.selectColor {
  border: 1px solid #01c78a;
}

#desc:hover {
  color: #01ccb3;
}

#desc {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-decoration: none;
  color: rgba(114, 112, 112, 0.47);
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
  margin-left: 3px;
}

.nixihuan-img > li {
  display: block;
}

.nixihuan-img {
  display: block;
  list-style: none;
}

.huifu {
  width: 830px;
  height: 30px;
  border: 1px solid rgba(143, 143, 143, 0.49);
  margin-top: 20px;
  margin-left: 50px;
  font-size: 14px;
}

#comments-desc {
  display: block;
  list-style: none;
}

#comments-desc > li {
  display: block;
  width: 890px;
  height: auto;
  margin-left: 0;
  border: 1px solid #cbcbcb;
  border-radius: 4px;
  margin-top: 30px;
}

.shops-comments-table-2 > ul > li:hover {
  border-color: #01ccb3;
}

.shops-comments-table-2 > ul > li {
  display: block;
  width: 200px;
  height: 200px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  float: left;
  margin-left: 18px;
  margin-top: 5px;
}

.shops-comments-table-2 > ul {
  display: block;
  list-style: none;
}

.shops-comments-table-1, .shops-comments-table-2 {
  width: 900px;
  height: auto;
  /*border: 1px solid black;*/
  margin-left: 280px;
  border-bottom: 5px solid #70bfc2;
  border-right: none;
  border-left: none;
  border-top: none;
  box-sizing: border-box;
  overflow: hidden;
}

.first > li {
  display: block;
  width: auto;
  height: 20px;
  margin-top: 10px;
  margin-left: 20px;
  color: #727070;
}

.first {
  display: block;
  list-style: none;
}

.canshu-desc {
  width: 800px;
  height: auto;
  /*border: 1px solid black;*/
  margin-left: 20px;
}

.shops-comments-table {
  width: 900px;
  height: 500px;
  /*border: 1px solid black;*/
  margin-left: 280px;
  border-bottom: 5px solid #70bfc2;
  border-right: none;
  border-left: none;
  border-top: none;
}

.shops-comments-title > li > a:hover {
  color: rgba(1, 204, 179, 0.34);
}

.shops-comments-title > li > a {
  display: block;
  width: 150px;
  height: 40px;
  text-decoration: none;
  color: rgba(114, 112, 112, 0.36);
}

.shops-comments-title > li {
  display: block;
  float: left;
  /*width: 150px;*/
  /*height: 40px;*/
  /*border: 1px solid black;*/
  text-align: center;
  line-height: 40px;
  font-size: 20px;
}

.shops-comments-title {
  display: block;
  list-style: none;
}

.bottom {
  overflow: hidden;
  width: 1190px;
  height: auto;
}

.shops-comments {
  width: 900px;
  height: auto;
  /*border: 1px solid black;*/
  float: left;
  margin-left: 18px;
  background-color: rgba(114, 112, 112, 0.13);

}

#desc-shops:hover {
  color: rgba(1, 204, 179, 0.63);
}

#desc-shops {
  display: block;
  margin-left: 20px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-decoration: none;
  color: rgba(114, 112, 112, 0.47);
}

#img-list > li {
  display: block;
}

#img-list {
  display: block;
  list-style: none;
}

.bottom-comments > ul > li:hover {
  border-color: rgba(1, 204, 179, 0.42);
}

.bottom-comments > ul > li {
  display: block;
  width: 260px;
  height: 300px;
  border: 2px solid rgba(148, 145, 145, 0.37);
  margin-left: 0px;
  margin-top: 5px;
}

.bottom-comments > ul {
  display: block;
  list-style: none;
}

.bottom-comments {
  width: 260px;
  height: auto;
  /*border: 1px solid black;*/
  float: left;

}

.ys-of-business-info > h4 {
  font-weight: 400;
  margin-top: 20px;
  margin-left: 20px;
  color: rgba(82, 79, 79, 0.99);
  font-size: 14px;
}

.ys-of-business-info {
  width: 238px;
  height: 200px;
  /*border: 1px solid black;*/
}

.ys-of-business-name {
  width: 238px;
  height: 100px;
  /*border: 1px solid black;*/
  background-image: linear-gradient(rgba(1, 204, 179, 0.26), #ffffff);
  line-height: 100px;
  text-align: center;
}

.ys-introduction-of-business {
  width: 240px;
  height: 670px;
  margin-top: 20px;
  /*border: 1px solid black;*/
  margin-left: 940px;

}

.ys-Notice-login {
  position: absolute;
  width: 130px;
  height: 40px;
  margin-left: 20px;
  margin-top: 100px;
  background-color: rgba(48, 184, 189, 0.47);
  transition-property: background-color, color;
  transition-duration: 500ms, 500ms;
  border: none;
  color: white;

}

.ys-Notice-reg {
  height: 40px;
  position: absolute;
  width: 130px;
  margin-left: 175px;
  margin-top: 100px;
  background-color: rgba(48, 184, 189, 0.7);
  transition-property: background-color, color;
  transition-duration: 500ms, 500ms;
  border: none;
  color: white;
}

.ys-Notice-login:hover {
  background-color: rgba(0, 117, 189, 0.37);
  border: none;
}

.ys-Notice-reg:hover {
  background-color: rgba(0, 117, 189, 0.55);
  border: none;
}

.number-sales-volume, .shops-evaluate {
  width: 150px;
  height: 30px;
  /*border: 1px solid black;*/
  float: left;
  margin-left: 5px;
  margin-top: 5px;
  font-size: 13px;
  line-height: 30px;
  /*text-align: center;*/
  font-family: 新宋体;
  color: rgba(82, 79, 79, 0.99);
}

.number-has-sold {
  margin-top: 5px;
  width: 500px;
  height: 40px;
  /*border: 1px solid black;*/
  overflow: hidden;
  position: relative;
}

.number-desc {
  width: 30px;
  height: 30px;
  /*border: 1px solid black;*/
  float: left;
  margin-left: 5px;
  margin-top: 5px;
  font-size: 13px;
  line-height: 30px;
  text-align: center;
  font-family: 新宋体;
  color: rgba(82, 79, 79, 0.99);
}

.number-shops {
  margin-left: 0px;
  margin-top: 5px;
  width: 250px;
  height: 40px;
  /*border: 1px solid black;*/
  overflow: hidden;
  position: relative;
}

.ys-shopCart-color-list > li:hover {
  border-color: #70bfc2;
}

.ys-shopCart-color-list > li {
  display: inline-block;
  width: auto;
  height: 30px;
  float: left;
  border: 1px solid rgba(245, 241, 241, 0.45);
  margin-left: 10px;
  margin-top: 5px;
  font-size: 10px;
  line-height: 30px;
  cursor: pointer;
}

.ys-shopCart-color-list {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.color-desc {
  width: 30px;
  height: 30px;
  /*border: 1px solid black;*/
  float: left;
  margin-left: 5px;
  margin-top: 5px;
  font-size: 13px;
  line-height: 30px;
  text-align: center;
  font-family: 新宋体;
  color: rgba(82, 79, 79, 0.99);
}

.size-desc {
  width: 30px;
  height: 30px;
  /*border: 1px solid black;*/
  float: left;
  margin-left: 5px;
  margin-top: 5px;
  font-size: 13px;
  line-height: 30px;
  text-align: center;
  font-family: 新宋体;
  color: rgba(82, 79, 79, 0.99);

}

.ys-shopCart-size-list {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ys-shopCart-size-list > li:hover {
  border-color: #70bfc2;
}

.ys-shopCart-size-list > li {
  display: inline-block;
  width: 25px;
  height: 30px;
  float: left;
  border: 1px solid rgba(245, 241, 241, 0.45);
  /*background-color: red;*/
  margin-left: 10px;
  margin-top: 5px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
}

.main {
  box-sizing: border-box;
  width: auto;
  height: auto;
  background-color: white;
}

.ys-shopCart-info {
  margin-top: 20px;
  width: 1190px;
  height: 700px;
  border: 1px solid rgba(201, 201, 201, 0.51);
  position: relative;
}

.ys-shopCart-img {
  position: absolute;
  width: 400px;
  height: 400px;
  border: 1px solid rgba(138, 137, 137, 0.4);
  margin-left: 20px;
  margin-top: 20px;
  overflow: hidden;
}

.ys-shopCart-img-index {
  /*position: absolute;*/
  margin-top: 15px;
  width: 370px;
  height: 370px;
  /*border: 1px solid black;*/
}

.ys-shopCart-img-list > li {
  width: 70px;
  height: 70px;
  border: 2px solid rgba(79, 218, 203, 0.14);
  float: left;
  margin-top: 25px;
  margin-left: 5px;
  transition-property: border-color;
  transition-duration: 500ms;
}

.ys-shopCart-img-list > li:hover {
  border-color: rgba(47, 238, 214, 0.53);
}

.ys-shopCart-information {
  position: absolute;
  width: 500px;
  height: 670px;
  /*border: 1px solid black;*/
  margin-top: 20px;
  margin-left: 430px;
}

.ys-shopCart-desc {
  width: 500px;
  height: 65px;
  /*border: 1px solid black;*/
}

.ys-shopCart-desc > h3 {
  font-size: 20px;
  font-family: 新宋体;
  margin-top: 6px;
}

.ys-shopCart-price {
  width: 500px;
  height: 150px;
  /*border: 1px solid black;*/
  margin-top: 5px;
}

.ys-shopCart-price-more-a {
  width: 500px;
  height: 80px;
  /*border: 1px solid black;*/
  background-color: rgba(1, 204, 179, 0.26);
  overflow: hidden;
}

.ys-shopCart-price-more-b {
  width: 500px;
  height: 70px;
  /*border: 1px solid black;*/
  background-color: rgba(92, 204, 191, 0.15);
}

#price {
  margin-top: 15px;
  margin-left: 5px;
  font-size: 13px;
  font-weight: 400;
  font-family: 新宋体;
  color: rgba(82, 79, 79, 0.99);
}

#after-price {
  margin-top: 15px;
  margin-left: 5px;
  font-size: 13px;
  font-weight: 400;
  font-family: 新宋体;
  color: rgba(82, 79, 79, 0.99);

}

#sure-price {
  position: absolute;
  margin-left: 70px;
  margin-top: -18px;
}

#suer-price-after {
  position: absolute;
  margin-left: 90px;
  margin-top: -25px;
  font-size: 25px;
  color: #019669;
}

.dazhe {
  margin-left: 210px;
  margin-top: -20px;
  width: 70px;
  height: 22px;
  /*border: 1px solid black;*/
  text-align: center;
  color: white;
  background-color: #01c78a;
  font-size: 15px;
  line-height: 22px;
  font-family: 新宋体;
}

#cutdown-price {
  line-height: 70px;
  margin-left: 5px;
  font-size: 20px;
  font-weight: 400;
  font-family: 新宋体;
  color: rgb(65, 182, 169);
}

.ys-shopCart-fastgive {
  width: 500px;
  height: 60px;
  /*border: 1px solid black;*/
}

#ys-shopCart-peisong {
  line-height: 60px;
  font-weight: 400;
  font-size: 15px;
  color: rgba(82, 79, 79, 0.55);
}

.size-list {
  margin-top: 5px;
  width: 500px;
  height: 40px;
  /*border: 1px solid black;*/
  overflow: hidden;
  position: relative;
}

.color-list {
  margin-top: 5px;
  width: 500px;
  height: 40px;
  /*border: 1px solid black;*/
  overflow: hidden;
  position: relative;
}
</style>